<template>
  <view>
    <l-background :color="color" />
    <l-tab-bar v-if="options.ioType == 0" id="tabBar" :tabs="tabs" :active-inx.sync="activeInx" @change="changeActiveInx" />
    <view class="tui-skeleton">
      <view v-if="carLists.length > 0" class="padding-30">
        <view>
          <view v-for="(item,index) in carLists" :key="index" class="card padding-30 margin-bottom-30 " @click="chooseVehicle(item,index)">
            <view class="flex-row">
              <image class="avatar" :src="item.avatar || defaultImg" mode="aspectFill" />
              <view v-if="options.ioType == 1" class="info flex-column justify-between margin-left-20">
                <text class="text-34 color-t1">{{ item.brand }}{{ item.seatAmount }}座{{ types(item.autoClass) }}</text>
                <text class="text-28 color-t2">{{ item.number }}</text>
                <text class="text-28 color-t2">{{ item.driverNickName || '未关联司机' }}</text>
              </view>
              <view v-else class="info flex-column justify-between margin-left-20">
                <text class="text-34 color-t1">{{ item.brand }}{{ item.seatAmount }}座{{ types(item.vehicleClass) }}</text>
                <text class="text-28 color-t2">{{ item.number }}</text>
                <text class="text-28 color-t2">{{ item.driverNickName || '未关联司机' }}</text>
                <view v-if="item.canChoose === 0" class="flex-row align-center flex-wrap">
                  <l-tag v-for="(val,i) in item.cannotLabels" :key="i" plain type="error" :text="val" style="margin-right: 10rpx" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <tui-nomore />
      </view>
      <template v-else>
        <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
        <l-no-data v-else text="暂无符合条件的车辆" type="data" />
      </template>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { orderGetCarList, transferAutoList, publishVehicleList } from '@/common/api/car'
import { getPublishDriverList } from '@/common/api/driver'
import { orderGetDriver } from '@/common/api/driver'
import { sortStrategyList, defaultSortStrategy, formatAutoClassLabel } from '../index'
import { preloadData } from './index'
export default {
  name: 'Index',
  data() {
    return {
      sortStrategyList,
      preloadData,
      order: defaultSortStrategy, // 选中的排序
      options: {},
      carLists: [],
      driverList: [],
      showSkeleton: true,
      defaultImg: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/default.png',
      tabs: [
        { title: '可选车辆' },
        { title: '不可选车辆' }
      ],
      activeInx: 0,
      optionalNo: [],
      optional: []
    }
  },
  computed: {
    types() {
      return (autoClass) => {
        if (formatAutoClassLabel(autoClass)) {
          return '(' + formatAutoClassLabel(autoClass) + ')'
        } else {
          return ''
        }
      }
    },
    color() {
      return !this.carLists.length ? '#ffffff' : ''
    },
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  onLoad(options) {
    this.options = options
    this.getData()
  },
  onPullDownRefresh() {
    this.getData()
  },
  methods: {
    async getData() {
      if (this.options.ioType === '0') {
        await this.getPublishDriverList()
        await this.getPublishCarList()
      } else if (this.options.type === 'transferOrder') {
        await this.getTransferOrderCarList()
      } else {
        await this.carList()
        await this.orderGetDriver()
      }
    },
    // 选择车辆
    chooseVehicle(item) {
      if (this.options.ioType === '0' && item.canChoose === 0) {
        return false
      }
      const obj = {
        vehicleName: item.number + '(' + item.brand + item.seatAmount + '座 )',
        vehicleId: this.options.ioType === '0' ? item.vehicleId : item.id
      }
      if (this.options.driverType !== '0' || !item.driverId) {
        Object.assign(obj, {
          driverName: '',
          driverId: ''
        })
      } else {
        const showDriver = this.driverList.includes(item.driverId)
        if (showDriver) {
          Object.assign(obj, {
            driverName: item.driverNickName,
            driverId: item.driverId
          })
        } else {
          Object.assign(obj, {
            driverName: '',
            driverId: '',
            showModule: true
          })
        }
      }

      this.setChooseVehicleInfo(obj)
      this.jump()
    },
    // 获取司机列表
    async orderGetDriver() {
      Object.assign(this.options, {
        nextDate: this.options.endDate
      })
      const [err, res] = await orderGetDriver(this.options)
      if (!this.$http.errorCheck(err, res)) return false
      this.driverList = res.data.data.map(item => item.userId)
    },
    async getPublishDriverList() {
      const [err, res] = await getPublishDriverList({
        companyId: this.userInfo.companyId,
        nextDate: this.options.endDate,
        startDate: this.options.startDate
      })
      if (!this.$http.errorCheck(err, res)) return false
      const list = res.data.data
      const optional = []
      const optionalNo = []
      list.forEach(item => {
        if (item.userId === this.options.driverId) {
          item.canChoose = 1
          optional.push(item)
        } else if (item.canChoose === 1) {
          optional.push(item)
        } else if (item.canChoose === 0) {
          optionalNo.push(item)
        }
      })
      this.driverList = this.activeInx === 0 ? optional : optionalNo
    },
    // 获取车辆列表
    async carList() {
      this.options.nextDate = this.options.endDate
      const send = Object.assign({
        page: 1,
        limit: 1000,
        order: this.order
      }, this.options)
      const [err, res] = await orderGetCarList(send)
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      const list = []
      let carLists = res.data.data.records
      if (!carLists) carLists = []

      carLists.forEach(item => {
        if (item.photo) item.avatar = item.photo.split(',')[0]
      })
      if (this.options.chosen && this.options.chosen !== 'undefined') {
        carLists.forEach(item => {
          if (item.photo) item.photo = item.photo.split(',')[0]
          const chosen = JSON.parse(this.options.chosen)
          if (!chosen.includes(item.id)) list.push(item)
        })
      }

      this.carLists = list.length ? list : carLists
    },
    changeActiveInx(e) {
      this.carLists = []
      this.carLists = this.activeInx === 0 ? this.optional : this.optionalNo
    },
    async getPublishCarList() {
      this.options.nextDate = this.options.endDate
      const send = Object.assign({
        companyId: this.userInfo.companyId
      }, this.options)
      const [err, res] = await publishVehicleList(send)
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let carLists = res.data.data
      if (!carLists) carLists = []
      this.optional = []
      this.optionalNo = []
      carLists.forEach(item => {
        item.avatar = item.photo ? item.photo.split(',')[0] : ''
        if (item.vehicleId === this.options.vehicleId) {
          item.canChoose = 1
          this.optional.push(item)
        } else if (item.canChoose === 1) {
          this.optional.push(item)
        } else if (item.canChoose === 0) {
          this.optionalNo.push(item)
        }
      })
      this.carLists = this.activeInx === 0 ? this.optional : this.optionalNo
    },
    // 获取转单车辆列表
    async getTransferOrderCarList() {
      const [err, res] = await transferAutoList({
        orderId: this.options.orderId
      })
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data
      if (!list) list = []
      this.carLists = list
      this.hasMore = false
    },
    ...mapMutations({
      setChooseVehicleInfo: 'order/setChooseVehicleInfo'
    })
  }
}
</script>

<style scoped lang="scss">
.card:last-child{
  margin:0!important;
}
.avatar{
  width: 240rpx;
  height: 180rpx;
  border-radius: $radius-default;
}
.info{
  height:180rpx;
}
.optionalNo-div{
  border: 2rpx solid rgba(170, 170, 170, 1);
  padding: 0 10rpx;
  margin-right: 10rpx;
}
</style>
